<template>
  <div class="boxOne">

    <!-- 表单开始 -->
    <div>
      <Form
        :rules="rules"
        ref="loginForm"
        :model="loginForm"
        class="loginContainer"
      >
        <h3 class="loginTitle" style="font-size: 36px">欢迎登录</h3>
        <FormItem prop="mobile">
          <Input
            type="text"
            autocomplete="false"
            v-model="loginForm.mobile"
            placeholder="请输入电话号码"
          >
          <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input
            type="password"
            autocomplete="false"
            v-model="loginForm.password"
            placeholder="请输入密码"
          ><Icon type="ios-lock-outline" slot="prepend"></Icon></Input>
        </FormItem>

        <checkbox
          v-model="loginForm.remenberMe"
          checked
          style="margin: 10px 0 15px 5px"
          >记住我</checkbox>
        <Button type="primary" style="width: 100%;" @click="submitLogin">登录</Button>
        <div class="register">
          <Button type="text" @click="regist" ghost>没有账号？立即注册</Button>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
// import md5 from "js-md5";

export default {
  data() {
    return {
      captchaUrl: "",
      loginForm: {
        mobile: "13568387255",
        password: "2827528315",
        // mobile: "",
        // password: "",
        // code: "",
      },
      rules: {
        mobile: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    regist() {
      this.$router.push("/register");
    },
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$Message.success("success");
        //   let salt = "1a2b3c4d";
        //   let str =
        //     "" +
        //     salt.charAt(0) +
        //     salt.charAt(2) +
        //     this.loginForm.password +
        //     salt.charAt(5) +
        //     salt.charAt(4);
        //   //请求后端登录接口
        //   let param = new URLSearchParams();
        //   param.append("mobile", this.loginForm.mobile);
        //   param.append("password", md5(str));
        //   this.$http({
        //     method:"post",
        //     url:"/login",
        //     data:param
        //   }).then((res)=>{
        //     // console.log(res);
        //     if (res.code == 200) {
        //       this.$store.commit("isLogin", true);
        //       this.$store.commit("userName", res.data.nickname);
        //       this.$store.commit("setToken", res.data.Token);
        //       this.$Message.success("登录成功！");
        //       //页面跳转
        //       this.$router.replace("/"); //replace不能进行网页后退 push可以进行网页后退
        //       } else {
        //       this.$Message.error("手机号或密码错误！");
        //     }
        //   });
        // } else {
        //   this.$Message.error("请输入所有字段");
        //   return false;
        }
      });
    },
  },
};
</script>

<style>
/* .boxOne {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-image: url("../assets/logo.png");
  background-attachment: fixed;   /* 固定body的背景 *//*
  background-size: cover;
} */

.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  width: 350px;
  height: 380px;
  padding: 15px 35px 15px 35px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #eaeaea;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  right: 180px;
}
.register {
  margin-top: 20px;
  position: relative;
  left: 2em;
}
.loginTitle {
  margin: 20px auto 50px auto;
  text-align: center;
}
</style>